import React from 'react'
import Link from './Link'
import PhoneGraphic from './PhoneGraphic'
import CodeBlock from './CodeBlock'
const Markdown = require('react-markdown')
const DocsMD = require('../docs-dist.json')
const slugify = require('slugify')

const safeString = s =>
  slugify(s)
    .replace(/\)/g, '-')
    .replace(/\(/g, '-')
    .replace(/^-/, '')
    .replace(/-$/, '')

const getHeadingForLevel = level => {
  switch (level) {
    case 2:
      return 'h2'
    case 3:
      return 'h3'
    case 4:
      return 'h4'
    case 5:
      return 'h5'
    case 6:
      return 'h6'
    case 7:
      return 'h7'
    default:
    case 1:
      return 'h1'
  }
}

const MDPage = ({ navigation, docPath }) =>
  <Markdown
    source={DocsMD[docPath]}
    className='md-section'
    renderers={{
      CodeBlock: function CodeBlockComponent ({ literal, language }) {
        if (language === 'phone-example') {
          const graphicName = literal.trim()
          return (
            <PhoneGraphic
              alt
              sources={{
                iphone: `/assets/examples/${graphicName}-iphone.png`,
                android: `/assets/examples/${graphicName}-android.png`
              }}
            />
          )
        }
        return <CodeBlock code={literal} />
      },
      Heading: function HeadingComponent ({ level, children }) {
        let id = React.Children
          .map(children, child => {
            if (typeof child === 'string') {
              return safeString(child)
            } else if (typeof child.props.children === 'string') {
              return safeString(child.props.children)
            }
          })
          .join('-')
        const Header = getHeadingForLevel(level)
        const linkHeader = id ? '' : 'link-header'
        const className = `md-header ${linkHeader}`
        return (
          <Header id={id} className={className}>
            {children}{' '}
            <a href={`#${id}`} title={children}>
              #
            </a>
          </Header>
        )
      },
      link: function LinkComponent ({ children, href }) {
        if (href.indexOf('PhoneGraphic:') === 0) {
          const graphicName = href.split('PhoneGraphic:')[1]
        }
        return (
          <Link href={href}>
            {children}
          </Link>
        )
      }
    }}
  />

export default MDPage
